<template>
  <div>
    <transition name="el-zoom-in-center">
      <div class="jsbos-preview-main">
        <div style="background: #e4e7ed">
          <div class="jsbos-common-layout-center">
            <div class="jsbos-common-search-box">
              <el-form
                ref="dataForm"
                :model="dataForm"
                size="small"
                label-position="right"
              >
                <el-row :gutter="16">
                  <el-page-header
                    @back="retreat()"
                    :content="title"
                    style="float: left; display: inline-block"
                  />
                  <el-col :span="12">
                    <el-form-item label="" prop="title">
                      <h2>{{ dataForm.title }}</h2>
                    </el-form-item>
                  </el-col>
                </el-row> </el-form
              ><br /><br />
              <el-row :gutter="16" ref="elrow">
                <el-col :span="16">
                  <el-form
                    ref="elForm"
                    :model="dataForm"
                    size="small"
                    label-width="100px"
                    label-position="right"
                    :inline="true"
                  >
                    <template>
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span class="header">&nbsp;&nbsp;</span>&nbsp;
                          <span>工单信息</span>
                        </div>
                        <el-col :span="12">
                          <el-form-item label="工单编号" prop="code">
                            {{ dataForm.code }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="工单标题" prop="title">
                            {{ dataForm.title }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item
                            label="投诉类型"
                            prop="workOrderTypeName"
                          >
                            {{ dataForm.workOrderTypeName }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="投诉方式" prop="putwayName">
                            {{ dataForm.putwayName }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="优先级" prop="priorityName">
                            <span
                              :class="showClass(dataForm.priority)"
                              style="background: none; display: contents"
                              >{{ dataForm.priorityName }}</span
                            >
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="工单状态" prop="enabledMarkName">
                            <span
                              :class="showClass(dataForm.enabledMark)"
                              style="background: none; display: contents"
                              >{{ dataForm.enabledMarkName }}</span
                            >
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item label="投诉描述" prop="note">
                            {{ dataForm.note }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item label="附件信息" prop="files">
                            <UploadImg
                              modular="assets"
                              type="annexpic"
                              v-if="dataForm.fileArr"
                              v-model="dataForm.fileArr"
                              :fileSize="5"
                              sizeUnit="MB"
                              :disabled="true"
                              :detailed="true"
                              :limit="3"
                            >
                            </UploadImg>
                            <span v-else>无</span>
                          </el-form-item>
                        </el-col>
                      </el-card>
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span class="header">&nbsp;&nbsp;</span>&nbsp;
                          <span>申报信息</span>
                        </div>
                        <el-col :span="12">
                          <el-form-item label="创建人" prop="creatorUserName">
                            {{ dataForm.creatorUserName }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item
                            label="创建时间"
                            prop="creatorTimeFormat"
                          >
                            {{ dataForm.creatorTimeFormat }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="投诉科室" prop="location">
                            {{ dataForm.location }}
                          </el-form-item>
                        </el-col>
                      </el-card>
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span class="header">&nbsp;&nbsp;</span>&nbsp;
                          <span>执行信息</span>
                        </div>

                        <!-- <el-col :span="12">
                          <el-form-item label="受理人" prop="acceptUserName">
                            {{ dataForm.acceptUserName }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="受理时间" prop="acceptTimeFormat">
                            {{ dataForm.acceptTimeFormat }}
                          </el-form-item>
                        </el-col> -->
                        <el-col :span="12">
                          <el-form-item label="执行人" prop="executeUserName">
                            {{ dataForm.executeUser }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item
                            label="执行时间"
                            prop="executeTimeFormat"
                          >
                            {{ dataForm.executeTimeFormat }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item label="处理结果说明" prop="result">
                            {{ dataForm.result }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="评价星级" prop="evaluateGrade">
                            <el-rate
                              v-model="dataForm.evaluateGrade"
                              disabled
                            ></el-rate>
                          </el-form-item>
                        </el-col>
                        <el-col :span="24">
                          <el-form-item
                            label="评价描述"
                            prop="evaluateDescription"
                          >
                            {{ dataForm.evaluateDescription }}
                          </el-form-item>
                        </el-col>
                      </el-card>
                    </template>
                  </el-form>
                </el-col>
                <el-col :span="8" ref="fileSpan">
                  <el-scrollbar
                    class="jsbos-common-el-tree-scrollbar"
                    :style="scrollStyle"
                  >
                    <!-- style="height: 792px" -->
                    <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <span class="header">&nbsp;&nbsp;</span>&nbsp;
                        <span>工单动态</span>
                      </div>
                      <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="工单动态" name="third"> -->
                      <!-- <FollowRecord ref="followRecord" @export="exportData" /> -->
                      <el-form v-loading="listLoading">
                        <el-timeline>
                          <el-timeline-item
                            v-for="item in followList"
                            :key="item.id"
                            :timestamp="item.creatorTimeFormat"
                            placement="top"
                            color="#409EFF"
                          >
                            <el-card style="background-color: #f7fbfe">
                              <div style="display: flex">
                                <!-- icon="el-icon-user-solid" -->
                                <span
                                  style="
                                    font-family: '微软雅黑';
                                    font-weight: 400;
                                    font-size: 14px;
                                    margin-top: 8px;
                                  "
                                >
                                  <p>
                                    动态类型:
                                    {{ item.phaseName }}
                                  </p>
                                  <br />
                                  {{ item.description }}
                                </span>
                              </div>
                              <br />
                              <p>
                                创建人:
                                {{ item.creatorUserName }}
                              </p>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                      </el-form>
                      <!-- </el-tab-pane> -->
                      <!-- </el-tabs> -->
                    </el-card>
                  </el-scrollbar>
                </el-col>
              </el-row>
            </div>
            <div
              class="jsbos-common-layout-main jsbos-flex-main"
              :gutter="16"
              style="padding-left: 14px"
            ></div>
          </div>
        </div>
      </div>
    </transition>
    <!-- <Preview :visible.sync="previewVisible" :id="activeId" /> -->
    <print-browse
      :visible.sync="previewVisible"
      id="430262863060291333"
      :formId="dataForm.id"
    />
  </div>
</template>

<script>
import {
  getWorkOrderInfo,
  getListByWorkId,
} from "@/views/questionnaire/api/complaint";
import Preview from "@/views/system/printDev/Preview";
import PrintBrowse from "@/components/print-browse";
export default {
  name: "OppoDetail",
  components: { Preview, PrintBrowse },
  props: {
    // 是否初始化
    isIndex: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      deviveVisible: false,
      videoStyle: {},
      scrollStyle: null,
      previewVisible: false,
      title: "",
      // 概况信息
      dataForm: {
        crmFollowInformationModelList: [{ creatorTimeFormat: "" }],
        files: "",
        fileArr: [],
      },
      followList: [],
      listLoading: false,
      // 联系人
      activeName: "third",
      stage: "",
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    if (!this.isIndex) {
      // 组件传递的this.isIndex
      // 判断是不是在首页进入的，如果是就不执行created初始化，使用refs中init
    } else {
      this.handleClick();
    }
  },
  mounted() {
    let parentWidth = this.$refs.fileSpan.$el.offsetWidth;
    this.$set(this.videoStyle, "width", parentWidth - 150 + "px");
    // this.videoStyle = { '': }
  },
  updated() {},
  methods: {
    // 打印
    preview() {
      this.previewVisible = true;
    },
    showClass(item) {
      const describeForActiveNameMap = {
        draft: () => "draft",
        submit: () => "submit",
        pending: () => "pending",
        accepted: () => "accepted",
        assign: () => "assign",
        execute: () => "execute",

        evaluate: () => "evaluate",
        normal: () => "accepted",
        urgent: () => "submit",
        emergent: () => "emergent",
        normal: () => "accepted",
        urgent: () => "submit",
        emergent: () => "emergent",
      };
      return describeForActiveNameMap[item]
        ? describeForActiveNameMap[item]()
        : "end";
    },
    // tab点击
    handleClick() {},
    //路由回退
    retreat() {
      // 返回时清除route中query参数
      this.$router.replace({ query: {} });
      this.activeName = "third";

      // 返回后刷新
      this.$emit("refresh");
    },
    // 概况信息
    init(data) {
      this.dataForm.id = data.id;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          // 工单详情
          getWorkOrderInfo(this.dataForm.id).then((res) => {
            this.dataInfo(res.data);
          });
          // 工单动态
          var data = {
            id: this.dataForm.id,
          };
          getListByWorkId(data).then((res) => {
            this.followList = res.data;
            this.followList.forEach((e) => {
              if (!this.$isEmpty(e.url)) {
                e.url.forEach((v) => {
                  var name = v.name.split(".");
                  v.fileType = name[name.length - 1];
                });
              }
            });
          });
        }
      });
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      if (_dataAll && _dataAll.files) {
        _dataAll.fileArr = JSON.parse(_dataAll.files);
      }
      this.dataForm = _dataAll;
    },
  },
};
</script>
<style lang="scss" scoped>
@import url(./js/index.scss);

.header {
  background: #18a6f4;
}

.cancel-btn {
  width: 60px;
  position: absolute;
  right: 15px;
  top: 10px;
}

.edit-row {
  position: absolute;
}

.box-card {
  margin-bottom: 15px;
  padding-right: 15px;
}

.pagination-container {
  background: #fff;
  text-align: right;
}
</style>
